<template>
    <div>
        <van-sticky :offset-top="1" class="aui-bg-f">
            <header id="fixed">
				<div class="aui-padded-l-5 aui-padded-r-5" style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
					<div class="title_lt" @click="back">
						<span class="iconfont icon-fanhui aui-text-f aui-ftn18"></span>
					</div>
					<div class="title aui-text-center aui-text-f aui-ftn18"  style="flex:1"  v-text="title"></div>
				</div>
				
                <div class="header_m aui-bg-f">
                    <van-row>
                        <van-col span="6" class="item aui-text-center" v-for="(item, index) in arr" :key="index" :class="{active: item.isActive}" @click="fnOpenCate(index)">
                            <span class="aui-ftn14" v-text="item.title"></span>
                            <i class="iconfont icon-shixinjiantou-xiangshang-copy aui-ftn14"></i>
                        </van-col>
                    </van-row>
                </div>
            </header>
        </van-sticky>
        <freeList ref="mylist" :title="title"></freeList>
        <!-- 常购类目 -->
        <van-overlay :show="category.show_lay" position="top">
            <div class="category aui-bg-f aui-padded-b-15">
                <div class="category_m">
                    <van-row v-if="category.select_type == 'category'" v-cloak>
                        <van-col span="12">
                            <div class="top">
                                <div class="item" v-bind:class="{ active: category.cur == 0}" @click="fnChangeCategory(0, '全部分类')">
                                    全部分类
                                    <i class="iconfont icon-gou aui-ftn12"></i>
                                </div>
                            </div>
                        </van-col>
                    </van-row>

                    <div class="content">
                        <van-row>
                            <van-col span="12" class="list" v-for="(list, i) in category.new_items" :key="i" v-cloak>
                                <div class="item" v-for="(item, index) in list"  v-bind:class="{ active: category.cur == item.id}" @click="fnChangeCategory(item.id, item.name)">
                                    {{item.name}}
                                    <i class="iconfont icon-gou aui-ftn12"></i>
                                </div>
                            </van-col>
                        </van-row>
                    </div>
                </div>
                <div class="aui-btn aui-btn-block aui-text-6 aui-ftn16 close_btn" @click="category.show_lay = false">关闭</div>
            </div>
        </van-overlay>
    </div>
</template>
<script>
  import freeList from './components/list.vue'
  import list from "../../service/free_sy.js"
    export default {
        name: 'dou',
        components: {
          freeList
        },
        data () {
            return {
                title: '视频专区',
                cur: 0,
                select_title: '',
                is_open_frm: false,
                from: '',
                timer_list: [],
                timer_num: 0,
                timer_old_num: 0,
                is_show_pic: false,
				cur_title: '视频专区',
                category: {
                  show_lay: false,
                  index: 0,
                  cur: 0,
                  select_title: '',
                  select_type: '',
                  new_items:[],
                  items: [],
				  save_items: [],
                  sorts: [
                      {
                          id: 0,
                          name: '默认排序'
                      },
                      {
                          id: 1,
                          name: '份数最少'
                      },
                      {
                          id: 2,
                          name: '人气最高'

                      },{
                          id: 3,
                          name: '价格最高'
                      },
                      {
                          id: 4,
                          name: '最新发布'

                      }
                  ],
                  categories: [],
                  downtypes: [
                      {
                          id: 0,
                          name: '全部'

                      },
                      {
                          id: 6,
                          name: '抖音'
                      },
                      {
                          id: 7,
                          name: '快手'

                      }
                  ],
                  puttypes: [
                      {
                          id: 0,
                          name: '全部'

                      },
                      {
                          id: 1,
                          name: '自动通过'
                      },
                      {
                          id: 2,
                          name: '人工审核'

                      }
                  ]
                },
                arr: [{
                        title: '分类类别',
                        type: 'category',
                        id: 1,
                        isActive: false,
                        select_id: 0
                    },
                    {
                        title: '审核方式',
                        type: 'puttype',
                        id: 2,
                        isActive: false,
                        select_id: 0
                    },
                    {
                        title: '购买平台',
                        type: 'downtype',
                        id: 3,
                        isActive: false,
                        select_id: 0
                    },
                    {
                        title: '默认排序',
                        type: 'sort',
                        id: 4,
                        isActive: false,
                        select_id: 0
                    }]
            }
        },
        methods: {
            // 图片预览
            fnPreview (img) {
                this.utils.fnPreviewPic([img])
            },
            // 打开筛选分类
            fnOpenCate: function(index) {
              this.cur = index;
              this.category.show_lay = true;
              this.category.cur = this.arr[index].select_id;
              this.category.index = this.cur;
                // this.category.select_title = api.pageParam.title;
              this.fnInitData(this.arr[index].type)
            },
            fnInitData: function(type) {
                this.category.select_type = type;
                switch (type) {
                    case 'category':
                        this.fnGetTabData();
                    break;
                    case 'sort':
                        this.category.items = this.category.sorts;
                    break;
                    case 'downtype':
                        this.category.items = this.category.downtypes;
                    break;
                    case 'puttype':
                        this.category.items = this.$route.query.typeId == 6 ? [{id: 1,name: '自动通过'}] : this.category.puttypes
                    break;
                }
                this.fnEditItems()
            },
            // 分类
            fnGetTabData: function() {
				if (this.category.items.length > 0 && this.category.save_items.length > 0) {
					this.category.items = this.category.save_items;
					this.fnEditItems()
				} else {
					this.category.items = this.$store.state.category ?   this.$store.state.category : [];
					this.category.save_items = this.category.items;
					if (this.category.items.length == 0) {
						list.fnGetCate().then(res => {
						  if (res && res.status) {
							this.category.items = res.data;
							this.category.save_items = res.data;
							this.fnEditItems()
						  }
						})
					} else {
						this.fnEditItems()
					}
					
				}
            },
            // 重组items
            fnEditItems: function() {
                var n = parseInt(this.category.items.length / 6);
                var s = this.category.items.length % 6
                this.category.new_items = [];
                var _arr = [];
                if (n > 0) {
                    for (var i = 0; i < n; i++) {
                        _arr = this.category.items.slice(6*i, 6*i+6)
                        this.category.new_items.push(_arr)
                    }
                }
                if (s > 0) {
                    _arr = this.category.items.slice(6*n, 6*n+s)
                    this.category.new_items.push(_arr)
                }
            },
            // 选择分类id,title,返回当前选择的大类
            fnChangeCategory: function(id, title) {
                this.category.cur = id;
                if (id == 0) {
                    switch (this.category.select_type) {
                        case 'category':
                            this.category.select_title = '分类类别';
                        break;
                        case 'sort':
                            this.category.select_title = '默认排序';
                        break;
                        case 'downtype':
                            this.category.select_title = '购买平台';
                        break;
                        case 'puttype':
                            this.category.select_title = '审核方式';
                        break;
                    }
                } else {
                   this.category.select_title = title;
               }
               this.fnChangeCate(this.category.index, this.category.cur, this.category.select_title, this.category.select_type, 5)
               this.category.show_lay = false;
            },
            // 切换类别
            fnChangeCate: function(index, id, title, cate_type, type_id) {
                this.cur = index;
                this.select_title = title;
				var vm = this;
				if (this.arr[index]) {
					this.arr[index].select_id = id;
					this.arr[index].title = title;
					this.arr[index].isActive = id == 0 ? false : true
				}
				this.arr.forEach(function(item, index) {
					if (item.title == '最新发布') {
						vm.title = '最新发布'
						return;
					}  else {
						vm.title = vm.cur_title && (vm.cur_title != '最新发布') ? vm.cur_title : '免费试用'
					}
				})
                this.$refs.mylist.fnChangeCate(id, cate_type, type_id);
            },
            // tab分类
            fnIntArr: function() {
                this.arr.forEach(function(item, index) {
                    if (item.isActive) {
                        item.isActive = false;
                        item.select_id = 0;
                        switch (index) {
                            case 0:
                                item.title = '分类类别';
                            break;
                            case 1:
                                item.title = '审核方式';
                            break;
                            case 2:
                                item.title = '购买平台';
                            break;
                            case 3:
                                item.title = '默认排序';
                            break;
                        }
                    }
                });
            },
            // 切换大分类 title:标题，index: 分类下标,cate_name:分类名称, cate_id: 分类id，type:大分类类型
            fnChangeFrm: function(title, index, cate_name, cate_id, type) {
                this.fnIntArr();
                if (this.arr[index]) {
                    this.arr[index].title = cate_name;
                    this.arr[index].isActive = true;
                    this.arr[index].select_id = cate_id;
                }
                this.$refs.mylist.fnChangeFrm(cate_id , type);
            }
        },
        mounted () {
            if (parseInt(this.$route.query.sortId)) {
              this.fnChangeCate(this.$route.query.index, this.$route.query.sortId, this.$route.query.cate_name, this.$route.query.cate_type, 5)
            } else if (this.$route.query.cate_type) {
				this.fnInitData(this.$route.query.cate_type)
				this.fnChangeCategory(this.$route.query.categoryId, this.$route.query.cate_name)
			} else {
              this.fnChangeFrm(this.$route.query.title, this.$route.query.index, this.$route.query.cate_name, this.$route.query.categoryId, 5)
            }
        }
    }
</script>
<style lang="scss" scoped>
  .van-overlay {
    top: 87px!important;
    z-index: 999;
  }
  .category  {
    width: 100%;
  }
  .category .category_m {
      padding: 5px 20px 0 20px;
  }
  .close_btn {
    width: 188px;height: 36px;line-height: 36px;margin: auto
  }

  .category .list:nth-child(odd),
  .category .top {
      padding-right: 20px;
  }

  div.category div.list:nth-child(even) {
      padding-left: 20px;
  }

  div.category div.item {
      font-size: 14px;
      color: #777;
      line-height: 24px;
      margin-bottom: 13px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
  }

  div.category div.item i {
      color: #fff;
  }

  div.category  div.item.active {
      color: var(--pink);
      border-bottom: 1px solid var(--pink);
  }

  div.category  div.item.active i {
      color: var(--pink);
  }

  div.category div.button {
      background-color: #000;
      height: 50px;
      line-height: 50px;
      margin-top: 8px;
  }

header {
    background: url('../../assets/index/title_bg.png') no-repeat center center;
    background-size: cover;
}
div.title {
    height: 50px;
    line-height: 50px;
}
div.header_m {
    height: 37px;
    line-height: 37px;
}
div.header_m  div.item {
    color: #666;
}
div.header_m  div.item.active {
    color: var(--pink);
}
</style>
